<template>
  <div class="page-header">
    <span class="iconfont icon-daohanglan page-header__mobile-icon" @click="openSideBar"></span>
    <avatar class="page-header__avater" />
  </div>
</template>

<script>
import Avatar from '../base/avatar'

export default {
  components: {
    Avatar
  },

  methods: {
    openSideBar() {
      this.$emit('open-side-bar')
    }
  }
}
</script>

<style scoped>
.page-header__mobile-icon {
  display: none;
}

.page-header {
  text-align: right;
}

@media (max-width: 768px) {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .page-header__mobile-icon {
    display: block;
  }
}
</style>